<template>
  <div class="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <div class="spacing"></div>
      <el-row class="themeBox">
        <div class="secondaryTitle secondaryTitleTheme">认证附件</div>
      </el-row>
      <div
        class="fileContent"
        v-if="
          enterpriseData.departmentType === 0 ||
          enterpriseData.departmentType === 15
        "
      >
        <el-row class="imgBoxs clearfix">
          <div class="itemBox">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125px; height: 177px"
                :src="businessLicenseImgUrl"
                :preview-src-list="businessLicenseImgUrlList"
              >
              </el-image>
            </div>
            <span>营业执照</span>
          </div>
          <div class="itemBox">
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172px; height: 107px"
                :src="bossIDCardFrontImgUrl"
                :preview-src-list="bossIDCardFrontImgUrlList"
              >
              </el-image>
            </div>
            <span>法人/经营者身份证正面</span>
          </div>
          <div class="itemBox">
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172px; height: 107px"
                :src="bossIDCardBackImgUrl"
                :preview-src-list="bossIDCardBackImgUrlList"
              >
              </el-image>
            </div>
            <span>法人/经营者身份证反面</span>
          </div>
        </el-row>
      </div>
      <div
        class="fileContent"
        v-if="
          enterpriseData.departmentType === 5 ||
          enterpriseData.departmentType === 10
        "
      >
        <el-row class="imgBoxs clearfix">
          <div class="itemBox">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125px; height: 177px"
                :src="affiltatedCertificateUrl"
                :preview-src-list="affiltatedCertificateUrlList"
              >
              </el-image>
            </div>
            <span>单位登记证书</span>
          </div>
        </el-row>
      </div>
      <div class="separator"></div>
      <el-row class="themeBox">
        <div class="secondaryTitle secondaryTitleTheme">其他附件</div>
      </el-row>
      <div class="fileContent">
        <template>
          <el-form-item label="规章制度：" prop="regulations">
            <uploadAnnex
              @getFileList="getFileListRegulations"
              :limitationFactor="limitationFactorRegulations"
              @getFile="getFileRegulations"
              :upLoadFile="upLoadFileRegulations"
            >
              <el-link
                slot="templatePreview"
                class="slotBtn"
                @click="previewTemplate('regulationsFiles')"
                >&nbsp;模板预览</el-link
              >
            </uploadAnnex>
          </el-form-item>
          <el-row>
            <uploadResult
              style="margin-left: 120px !important"
              :resultList="upLoadFileRegulations"
              @callBackResult="getFileRegulations"
            />
          </el-row>
        </template>
        <template v-if="enterpriseData.isLaborDispatch === '1'">
          <el-form-item label="劳务派遣许可证：" prop="licence">
            <uploadAnnex
              @getFileList="getFileListLicence"
              :limitationFactor="limitationFactorLicence"
              @getFile="getFileLicence"
              :upLoadFile="upLoadFileLicence"
            >
              <el-link
                slot="templatePreview"
                class="slotBtn"
                @click="previewTemplate('laborDispatchFiles', 'image')"
                >&nbsp;模板预览</el-link
              >
            </uploadAnnex>
          </el-form-item>
          <el-row>
            <uploadResult
              style="margin-left: 120px !important"
              :resultList="upLoadFileLicence"
              @callBackResult="getFileLicence"
            />
          </el-row>
        </template>
        <template v-if="enterpriseData.isUnionize === '1'">
          <el-form-item label="工会上级批复" prop="reply">
            <uploadAnnex
              @getFileList="getFileListReply"
              :limitationFactor="limitationFactorReply"
              @getFile="getFileReply"
              :upLoadFile="upLoadFileReply"
            >
              <el-link
                slot="templatePreview"
                class="slotBtn"
                @click="previewTemplate('unionReplyFiles', 'image')"
                >&nbsp;模板预览</el-link
              >
            </uploadAnnex>
          </el-form-item>
          <el-row>
            <uploadResult
              style="margin-left: 120px !important"
              :resultList="upLoadFileReply"
              @callBackResult="getFileReply"
            />
          </el-row>
        </template>
        <template v-if="enterpriseData.isContract === '1'">
          <el-form-item label="集体合同" prop="contract">
            <uploadAnnex
              @getFileList="getFileListContract"
              :limitationFactor="limitationFactorContract"
              @getFile="getFileContract"
              :upLoadFile="upLoadContract"
            >
              <el-link
                slot="templatePreview"
                class="slotBtn"
                @click="previewTemplate('collectiveContractFiles')"
                >&nbsp;模板预览</el-link
              >
            </uploadAnnex>
          </el-form-item>
          <el-row>
            <uploadResult
              style="margin-left: 120px !important"
              :resultList="upLoadFileContract"
              @callBackResult="getFileContract"
            />
          </el-row>
        </template>
        <template v-if="enterpriseData.isProtocol === '1'">
          <el-form-item label="工资集体协议" prop="agreement">
            <uploadAnnex
              @getFileList="getFileListAgreement"
              :limitationFactor="limitationFactorAgreement"
              @getFile="getFileAgreement"
              :upLoadFile="upLoadFileAgreement"
            >
              <el-link
                slot="templatePreview"
                class="slotBtn"
                @click="previewTemplate('salaryAgreementFiles')"
                >&nbsp;模板预览</el-link
              >
            </uploadAnnex>
          </el-form-item>
          <el-row>
            <uploadResult
              style="margin-left: 120px !important"
              :resultList="upLoadFileAgreement"
              @callBackResult="getFileAgreement"
            />
          </el-row>
        </template>
        <el-image
          class="previewImg"
          style="width: 56px; height: 0px"
          :src="src"
          :preview-src-list="[src]"
          id="publicSignBox"
        ></el-image>
      </div>
      <el-form-item class="submitBox">
        <el-button @click="backToFirst" class="commonBut">返回上一步</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          class="commonBut saveBtn"
          :loading="saveLoading"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'ImproveAttachmentInfo',
  data() {
    var checkUploadFile = (rule, value, callback) => {
      if (this.ruleForm.regulations.length === 0) {
        return callback(new Error('请上传劳动规章制度'))
      } else {
        callback()
      }
    }
    return {
      titleText: '附件信息',
      businessLicenseImgUrl: '', //认证附件
      bossIDCardFrontImgUrl: '',
      bossIDCardBackImgUrl: '',
      affiltatedCertificateUrl: '',
      businessLicenseImgUrlList: [], //认证附件预览
      bossIDCardFrontImgUrlList: [],
      bossIDCardBackImgUrlList: [],
      affiltatedCertificateUrlList: [],
      enterpriseData: {}, //单位信息
      ruleForm: {
        regulations: [],
      },
      rules: {
        regulations: [
          {
            required: true,
            validator: checkUploadFile,
            trigger: 'change',
          },
        ],
      },
      src: '', //模板预览地址
      upLoadFileRegulations: [], //规章制度
      srcListRegulations: [],
      oldSrcListRegulations: [],
      limitationFactorRegulations: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeSix', //自定义上传格式校验类型
        fileId: 'regulations', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'regulationsForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '最多上传10个附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      upLoadFileLicence: [], //许可证
      srcListLicence: [],
      oldSrcListLicence: [],
      limitationFactorLicence: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeSix', //自定义上传格式校验类型
        fileId: 'licence', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'licenceForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '最多上传10个附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      upLoadFileReply: [], //工会上级批复
      srcListReply: [],
      oldSrcListReply: [],
      limitationFactorReply: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeSix', //自定义上传格式校验类型
        fileId: 'reply', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'replyForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '最多上传10个附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      upLoadFileContract: [], //集体合同
      srcListContract: [],
      oldSrcListContract: [],
      limitationFactorContract: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeSix', //自定义上传格式校验类型
        fileId: 'contract', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'contractForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '最多上传10个附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      upLoadFileAgreement: [], //工资集体协议
      srcListAgreement: [],
      oldSrcListAgreement: [],
      limitationFactorAgreement: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeSix', //自定义上传格式校验类型
        fileId: 'agreement', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'agreementForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '最多上传10个附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，zip，rar', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      saveLoading: false,
      isShowUpdate: '',
    }
  },
  created() {
    this.getEnterpriseInfo()
  },
  methods: {
    // 获取企业信息
    getEnterpriseInfo() {
      return this.axios({
        method: 'post',
        url: 'api-c/company/expand/findCompanyDetail',
      })
        .then((response) => {
          if (!response.data.hasError) {
            const results = response.data.result
            this.enterpriseData = results
            this.businessLicenseImgUrl =
              this.enterpriseData.businessLicenseImgFile &&
              this.enterpriseData.businessLicenseImgFile[0].url
            this.bossIDCardFrontImgUrl =
              this.enterpriseData.bossIDCardFrontImgFile &&
              this.enterpriseData.bossIDCardFrontImgFile[0].url
            this.bossIDCardBackImgUrl =
              this.enterpriseData.bossIDCardBackImgFile &&
              this.enterpriseData.bossIDCardBackImgFile[0].url
            this.affiltatedCertificateUrl =
              this.enterpriseData.affiltatedCertificateFile &&
              this.enterpriseData.affiltatedCertificateFile[0].url
            this.businessLicenseImgUrlList.push(this.businessLicenseImgUrl)
            this.bossIDCardFrontImgUrlList.push(this.bossIDCardFrontImgUrl)
            this.bossIDCardBackImgUrlList.push(this.bossIDCardBackImgUrl)
            this.affiltatedCertificateUrlList.push(
              this.affiltatedCertificateUrl
            )
            console.log(
              businessLicenseImgUrl,
              bossIDCardFrontImgUrl,
              bossIDCardBackImgUrl,
              affiltatedCertificateUrl
            )
            this.upLoadFileRegulations = JSON.parse(
              JSON.stringify(this.enterpriseData.regulationsFiles)
            )
            this.ruleForm.regulations = JSON.parse(
              JSON.stringify(this.enterpriseData.regulationsFiles)
            )
            for (
              let i = 0;
              i < this.enterpriseData.regulationsFiles.length;
              i++
            ) {
              this.srcListRegulations.push(
                this.enterpriseData.regulationsFiles[i].url
              )
              this.oldSrcListRegulations.push(
                this.enterpriseData.regulationsFiles[i].url
              )
            }
            this.upLoadFileLicence = JSON.parse(
              JSON.stringify(this.enterpriseData.laborDispatchFiles)
            )
            for (
              let i = 0;
              i < this.enterpriseData.laborDispatchFiles.length;
              i++
            ) {
              this.srcListLicence.push(
                this.enterpriseData.laborDispatchFiles[i].url
              )
              this.oldSrcListLicence.push(
                this.enterpriseData.laborDispatchFiles[i].url
              )
            }
            this.upLoadFileReply = JSON.parse(
              JSON.stringify(this.enterpriseData.unionReplyFiles)
            )
            for (
              let i = 0;
              i < this.enterpriseData.unionReplyFiles.length;
              i++
            ) {
              this.srcListReply.push(this.enterpriseData.unionReplyFiles[i].url)
              this.oldSrcListReply.push(
                this.enterpriseData.unionReplyFiles[i].url
              )
            }
            this.upLoadFileContract = JSON.parse(
              JSON.stringify(this.enterpriseData.collectiveContractFiles)
            )
            for (
              let i = 0;
              i < this.enterpriseData.collectiveContractFiles.length;
              i++
            ) {
              this.srcListContract.push(
                this.enterpriseData.collectiveContractFiles.url
              )
              this.oldSrcListContract.push(
                this.enterpriseData.collectiveContractFiles.url
              )
            }
            this.upLoadFileAgreement = JSON.parse(
              JSON.stringify(this.enterpriseData.salaryAgreementFiles)
            )
            for (
              let i = 0;
              i < this.enterpriseData.salaryAgreementFiles.length;
              i++
            ) {
              this.srcListAgreement.push(
                this.enterpriseData.salaryAgreementFiles[i].url
              )
              this.oldSrcListAgreement.push(
                this.enterpriseData.salaryAgreementFiles[i].url
              )
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    backToFirst() {
      this.$emit('changeActive', 0)
    },
    // 预览模板
    previewTemplate(name, type) {
      // this.$message.error("模板暂未上传");
      return this.axios({
        method: 'post',
        url: 'api-c/company/expand/findnccompanyfileurl',
        data: {
          name,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            if (type === 'image') {
              this.src = response.data.result.url
              setTimeout(() => {
                $('#publicSignBox').click()
              }, 300)
            } else {
              window.open(response.data.result.url)
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 保存附件信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          let data = {
            regulationsFiles: JSON.stringify(this.upLoadFileRegulations),
          }
          this.upLoadFileLicence.length > 0 &&
            (data.laborDispatchFiles = JSON.stringify(this.upLoadFileLicence))
          this.upLoadFileReply.length > 0 &&
            (data.unionReplyFiles = JSON.stringify(this.upLoadFileReply))
          this.upLoadFileContract.length > 0 &&
            (data.collectiveContractFiles = JSON.stringify(
              this.upLoadFileContract
            ))
          this.upLoadFileAgreement.length > 0 &&
            (data.salaryAgreementFiles = JSON.stringify(
              this.upLoadFileAgreement
            ))
          this.axios({
            method: 'post',
            url: 'api-c/company/expand/modifycompanydetailfile',
            data,
          })
            .then((response) => {
              this.saveLoading = false
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                this.$router.push({
                  path: '/home/enterpriseSet/employerRecordDetail',
                  name: 'employerRecordDetail',
                })
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/enterpriseSet/employerRecordDetail',
                  newUrl: this.$router.currentRoute.fullPath,
                })
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            .catch((error) => {
              this.saveLoading = false
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.$message({
            type: 'error',
            message: '请按照提示规则输入内容',
          })
          return false
        }
      })
    },
    // 规章制度
    getFileListRegulations(val) {
      this.oldSrcListRegulations.push(val)
      this.srcListRegulations.push(val)
    },
    getFileRegulations(val) {
      this.upLoadFileRegulations = val
      this.ruleForm.regulations = val
    },
    // 许可证
    getFileListLicence(val) {
      this.oldSrcListLicence.push(val)
      this.srcListLicence.push(val)
    },
    getFileLicence(val) {
      this.upLoadFileLicence = val
    },
    // 工会上级批复
    getFileListReply(val) {
      this.oldSrcListReply.push(val)
      this.srcListReply.push(val)
    },
    getFileReply(val) {
      this.upLoadFileReply = val
    },
    // 集体合同
    getFileListContract(val) {
      this.oldSrcListContract.push(val)
      this.srcListContract.push(val)
    },
    getFileContract(val) {
      this.upLoadFileContract = val
    },
    // 工资集体协议
    getFileListAgreement(val) {
      this.oldSrcListAgreement.push(val)
      this.srcListAgreement.push(val)
    },
    getFileAgreement(val) {
      this.upLoadFileAgreement = val
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .infoTitle {
    font-size: 16px;
    padding: 16px 24px;
    background: #f5f7fb;
    margin-bottom: 24px;
    color: #333;
    font-weight: 700;
  }
  .fileContent {
    padding: 24px;
    position: relative;
    .imgBoxs {
      text-align: center;
      .itemBox {
        font-size: 14px;
        display: inline-block;
        margin-right: 54px;
        .imgBox {
          width: 200px;
          height: 200px;
          background: rgba(222, 229, 244, 0.3);
          margin-bottom: 10px;
          span {
            color: #333;
            font-size: 14px;
          }
        }
        .licenseBox {
          .el-image {
            margin-top: 11.5px;
          }
        }
        .idcardBox {
          .el-image {
            margin-top: 46.5px;
          }
        }
      }
      .itemBox:nth-child(3) {
        margin-right: 0px;
      }
    }
    .previewImg {
      position: absolute;
      top: 25px;
      left: 0;
      cursor: pointer;
      /deep/.el-image__preview {
        opacity: 1;
      }
    }
  }
  .submitBox {
    text-align: center;
    margin-top: 20px;
    /deep/.el-form-item__content {
      margin-left: 0 !important;
    }
  }
  .slotBtn {
    color: #009588;
    cursor: pointer;
  }
}
.themeBox {
  padding-top: 20px;
  padding-left: 20px;
}
</style>
